<template>
  <div class="audio-recorder-wrapper">
    <div class="recorder-wrapper">   
      <div @click="action" class="recorder-btn">
        <span v-if="status == 0">点击录音</span>
        <span v-if="status == 1">暂停录音</span>
        <span v-if="status == 2">点击播放</span>
        <span v-if="status == 3">暂停播放</span>
      </div>
      <div v-if="status == 2" class="remove-btn" @click="remove">
        <img src="../assets/icon/icon_delete.png" alt="" />
      </div>
      <span class="timer">{{ displayTime }}s</span>
    </div>
  </div>
</template>

<script>


export default {
  name: 'AudioRecorder',
  data () {
    var status = 0
    var duration = 0
    if (this.cacheAudio) {
      status = 2
      duration = this.cacheAudio.duration
    }
    return {
      audio: this.cacheAudio,
      status: status,
      duration: duration,
      countTime: duration,
      audioTimer: null
    }
  },
  props: ['cacheAudio'],
  computed: {
    displayTime: function() {
      var str = ''
      switch(this.status) {
        case 0:
          str = '00/60'
          break
        case 1:
          if (this.countTime < 10 && this.countTime > 0) {
            str = '0' +  this.countTime + '/60'
          } else {
            str = this.countTime + '/60'
          }
          break
        case 2:
          if (this.duration < 10 && this.duration > 0) {
            str = '0' + this.duration + '/' + '0' + this.duration
          } else {
            str = this.duration + '/' + this.duration
          }
          break
        case 3:
          str = this.countTime
          if (this.countTime < 10 && this.countTime > 0) {
            str = '0' + this.countTime
          }
          str = str + '/'
          if (this.duration < 10 && this.duration > 0) {
            str = str + '0' + this.duration
          } else {
            str = str + this.duration
          }
          break
        default:
          break
      }
      return str
    }
  },
  methods: {
    action: function() {
      switch(this.status) {
        case 0:
          // 开始录音
          this.startRecord();     
          break;
        case 1:
          // 停止录音
          this.stopRecord();   
          break;
        case 2:
          // 开始播放
          this.play();
          break;
        case 3:
          // 暂停播放
          this.pause();
          break;
        default:
          break;
      }
    
    },
    // 开始录音
    startRecord: function() {
      this.status = 1
      var that = this
      this.audioTimer = setInterval(function() {
        that.countTime ++
      }, 1000)
      this.wx.startRecord()
      this.wx.onVoiceRecordEnd({
        complete: function(res) {
          if(that.audioTimer) {
            window.clearInterval(that.audioTimer)
            that.audioTimer = null
          }
          that.status = 2
          that.duration = that.countTime
          var audioLocalId = res.localId;
          that.wx.uploadVoice({
            localId: res.localId,
            isShowProgressTips: 1,
            success: function(res) {
              that.audio = { localId: audioLocalId, serverId: res.serverId, duration: that.duration }
              that.$emit('audioChanged', that.audio)
            }
          })
        }
      })
    },
    // 停止录音
    stopRecord: function() {
      if(this.audioTimer) {
        window.clearInterval(this.audioTimer)
        this.audioTimer = null
      }
      this.status = 2
      this.duration = this.countTime
      var that = this
      this.wx.stopRecord({
        success: function(res) {
          var audioLocalId = res.localId;
          that.wx.uploadVoice({
            localId: res.localId,
            isShowProgressTips: 1,
            success: function(res) {
              that.audio = { localId: audioLocalId, serverId: res.serverId, duration: that.duration }
              that.$emit('audioChanged', that.audio)
            }
          })
        }
      })
    },
    // 录音播放结束后运行
    onAudioPlayEnd: function() {
      this.status = 2
      this.countTime = this.duration
      if(this.audioTimer) {
        window.clearInterval(this.audioTimer)
        this.audioTimer = null
      }
    },
    // 开始播放
    play: function() {
      this.status = 3
      this.wx.playVoice({
        localId: this.audio.localId
      })
      var that = this
      this.wx.onVoicePlayEnd({
        success: function(res) {
          that.onAudioPlayEnd()
        }
      })
      this.audioTimer = setInterval(function() {
        that.countTime --
      }, 1000)
    },
    // 暂停播放
    pause: function() {
      this.status = 2
      if(this.audioTimer) {
        window.clearInterval(this.audioTimer)
        this.audioTimer = null
      }
      this.wx.pauseVoice({
        localId: this.audio.localId
      })

    },
    // 移除录音
    remove: function() {
      this.status = 0
      this.duration = 0
      this.countTime = 0
      this.audio = null
      this.$emit('audioChanged', null)
    }
  }
}

</script>

<style lang="scss" scoped>
@import '../assets/style/const.scss';

.audio-recorder-wrapper {
  margin-top: 1px;
  width: 100%;
  background: #fff;
  .recorder-wrapper {
    position: relative;
    width: 7rem;
    height: 5rem;
    margin: 0 auto;
    .recorder-btn {
      width: 3rem;
      height: 3rem;
      background: $color-yellow;
      text-align: center;
      margin: 0 auto;
      position: relative;
      top: 1rem;
      border-radius: 1.5rem;
      span {
        color: #fff;
        height: 3rem;
        line-height: 3rem;
        font-size: .6rem;
      }
    }
    .remove-btn {
      position: absolute;
      top: .5rem;
      right: 0;
      img {
        width: 1rem;
        height: 1rem;
        padding: .5rem;
      }
    }
    .timer{
      position: absolute;
      bottom: 1rem;
      right: 0;
      color: $color-text-desc;
      font-size: .6rem;
    }
  }
}

</style>
